<template>
	<div class="leave">
		<div class="leave-img">
			<ul>
				<li v-for="item in img" :key="item.id">
					<img :src="item.img"/>
					<h3>{{item.title}}</h3>
					<p>{{item.lable}}</p>
				</li>
				
			</ul>			
		</div>
		<div class="leave-bottom">
			<ol>
				<li v-for="item in menu" :key="item.id"><span>{{item.span}}</span>{{item.title}}</li>		
			</ol>
		</div>
	</div>
</template>

<script>
	export default{
		name:'Leave',
		data(){
			return{
				img:[
					{id:1,img:'imgss/Leave1.jpg',title:'克罗地亚',lable:'君临之城'},
					{id:2,img:'imgss/Leave2.png',title:'滨城',lable:'风味南洋'},
					{id:3,img:'imgss/Leave3.jpg',title:'纳米比亚',lable:'狂野非洲'},
				],
				menu:[
					{id:1,title:'新加坡',span:'花园城市'},
					{id:2,title:'格鲁吉亚',span:''},
					{id:3,title:'缅甸',span:''},
					{id:4,title:'墨西哥',span:''},
					{id:5,title:'吴哥迷城',span:'高棉的微笑'},
					{id:6,title:'古巴',span:'小众社会主义风情'},
				]
			}
		}
	}
</script>

<style scoped>
	.leave-img{
		position: relative;
	}
	.leave-img ul{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 95%;
		margin: 0 auto;
	}
	.leave-img ul li{
		width: 32.5%;
	}
	.leave-img ul li img{
		width: 100%;		
	}
	.leave-img ul li:first-child img{
		border-radius: 0.2rem 0 0 0.2rem;
	}
	.leave-img ul li:last-child img{
		border-radius: 0 0.2rem 0.2rem 0 ;
	}
	.leave-img ul li h3{
		width: 100%;
		font-size: 0.4rem;
		font-weight: bold;
		text-align: center;
		position: relative;
		bottom: 1rem;
		color: white;
	}
	.leave-img ul li p{
		color: gray;
		text-align: center;
		position: relative;
		bottom: 0.8rem;
	}
	.leave .leave-bottom{
		margin-top: -0.3rem;
	}
	.leave .leave-bottom ol{
		width: 99%;		
	}
	.leave .leave-bottom ol li{
		float: left;
		width: 31%;
		text-align: center;
		line-height: 1rem;
		border: 0.01rem solid gainsboro;
		margin-left: 0.15rem;
		margin-top: 0.15rem;
		font-size: 0.38rem;
		font-weight: bold;
		position: relative;
	}
	.leave .leave-bottom ol li span{
		font-size: 0.05rem;
		font-weight: normal;
		position: absolute;
		background-color: gold;
		line-height: 0.25rem;
		left: 0;
		border-radius: 0 0 0.2rem 0;
	}
</style>
